<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Typography — Chapter 5 — Magic of CSS — Adam Schwartz</title>

        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link rel="icon" href="/magic-of-css/favicon.ico">

        <link rel="stylesheet" href="../../css/base.css">
        <link rel="stylesheet" href="../../css/logo.css">
        <link rel="stylesheet" href="../../css/chapter.css">

        <script src="../../js/chapters.js"></script>
    </head>
    <body>
        <div class="page">
            <a class="logo" href="/../.."><h1 class="the-magic-of">The Magic of CSS</h1><div class="css-rainbow"><div class="css-letter css-rainbow-c"><div class="rainbow"><div class="bands"><div class="red"></div><div class="orange"></div><div class="yellow"></div><div class="green"></div><div class="blue"></div><div class="purple"></div></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-1"><div class="top-half"><div class="rainbow"><div class="bands"><div class="red"></div><div class="orange"></div><div class="yellow"></div><div class="green"></div><div class="blue"></div><div class="purple"></div></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"><div class="purple"></div><div class="blue"></div><div class="green"></div><div class="yellow"></div><div class="orange"></div><div class="red"></div></div></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-2"><div class="top-half"><div class="rainbow"><div class="bands"><div class="red"></div><div class="orange"></div><div class="yellow"></div><div class="green"></div><div class="blue"></div><div class="purple"></div></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"><div class="purple"></div><div class="blue"></div><div class="green"></div><div class="yellow"></div><div class="orange"></div><div class="red"></div></div></div></div></div></div></a>

            <div class="chapter">
                <h1>
                    <span class="number">Chapter 5</span>
                    <span class="title">Typography</span>
                </h1>

                <h2>Typography is hard</h2>

                <p>First off, give yourself a pat on the back. You’ve made it this far. You’re reading about typography!</p>

                <p>Now take a moment to realize that <em>most of the things you look at every day are type</em>. So before discussing typography, let’s look at it.</p>

                <p>Take a moment and just fly through some of these beautiful typographically-based design collections:</p>

                <ul>
                    <li><a href="http://www.awwwards.com/websites/typography/">Awwwards: Typography in Web Design</a></li>
                    <li><a href="http://webdesign.tutsplus.com/articles/10-examples-of-inspirational-typography-on-the-web--webdesign-904">Tutsplus: 10 Examples of Inspirational Typography on the Web</a></li>
                    <li><a href="http://webdesignledger.com/inspiration/21-beautiful-examples-of-typography-in-web-design">Web Design Ledger: 21 Beautiful Examples of Typography in Web Design</a></li>
                    <li><a href="http://www.smashingmagazine.com/2013/08/06/beautiful-typography-web-design/">Smashing Magazine: A Journey Through Beautiful Typography In Web Design</a></li>
                    <li><a href="http://web3canvas.com/20-beautifully-designed-typography-website-inspiration-2013/">Web3Canvas: 20 beautifully designed Typography Website Inspiration 2013</a></li>
                </ul>

                <h2>Seeing</h2>

                <p>As with <a href="../4-color">color</a>, designing well with typography requires using your eyes. Really <em>see</em> the shape of each glyph. Notice the negative space between glyphs. You have more control over these things than you might think. And over the course of the next few chapters, I’m going to show you how.</p>

                <h2>Basic CSS Typography Tools</h2>

                <p>The basic tools in your toolkit consist of the following:</p>

                <ul>
                    <li>
                        <p>Font properties</p>
                        <ul>
                            <li><code>font-family</code> — <span style="font-family: inherit">inherit</span>, <span style="font-family: serif">serif</span>, <span style="font-family: monospace">monospace</span></li>
                            <li><code>font-size</code> — <span style="font-size: inherit">inherit</span>, <span style="font-size: 18px; line-height: 1em">18px</span>, <span style="font-size: 10px; line-height: 1em">10px</span></li>
                            <li><code>font-weight</code> — <span style="font-weight: inherit">inherit</span>, <span style="font-weight: bold">bold</span>, <span style="font-weight: 100">100</span></li>
                            <li><code>font-style</code> — <span style="font-style: inherit">inherit</span>, <span style="font-style: italic">italic</span></li>
                            <li><code>font-variant</code> — <span style="font-variant: inherit">inherit</span>, <span style="font-variant: small-caps">small-caps</span></li>
                        </ul>
                    </li>
                    <li>
                        <p>Text properties</p>
                        <ul>
                            <li><code>text-align</code> — <span style="text-align: inherit">inherit</span>, <span style="text-align: center; display: inline-block; width: 10em; box-shadow: 0 0 0 1px #ccc">center</span></li>
                            <li><code>text-decoration</code> — <span style="text-decoration: inherit">inherit</span>, <span style="text-decoration: underline">underline</span>, <span style="text-decoration: overline">overline</span>, <span style="text-decoration: line-through">line-through</span></li>
                            <li><code>text-indent</code> — <span style="text-indent: inherit">inherit</span>, <span style="text-indent: 50px; display: inline-block">50px</span></li>
                            <li><code>text-shadow</code> — <span style="text-shadow: inherit">inherit</span>, <span style="text-shadow: 0 1px 3px red">0 1px 3px red</span></li>
                            <li><code>text-transform</code> — <span style="text-transform: inherit">inherit</span>, <span style="text-transform: uppercase">uppercase</span></li>
                        </ul>
                    </li>
                    <li>
                        <p>Miscellaneous</p>
                        <ul>
                            <li><code>letter-spacing</code> — <span style="letter-spacing: inherit">inherit</span>, <span style="letter-spacing: 5px">5px</span></li>
                            <li><code>white-space</code> — <span style="white-space: inherit">inherit</span>, <span style="white-space: pre">pre        pre</span></li>
                            <li><code>line-height</code> — <span style="line-height: inherit; display: inline-block; box-shadow: 0 0 0 1px #ccc">inherit</span>, <span style="line-height: .75em; display: inline-block; box-shadow: 0 0 0 1px #ccc">.75em</span></li>
                            <li><code>word-spacing</code> — <span style="word-spacing: inherit">inherit</span>, <span style="word-spacing: 100px">100px 100px</span></li>
                        </ul>
                    </li>
                </ul>

                <p>Now that you have a basic idea of what is possible, let’s look at a few combinations of these properties.</p>

                <style>
                    .typography-example {
                        line-height: normal
                    }
                </style>

                <h2>Examples</h2>

                <span><!-- prevent h2 + h3 selector from applying --></span>

                <h3>Example 1: Light, uppercase, with spacing</h3>

                <p>Light text colors on dark backgrounds tend to feel as if they have a heavier weight. So with this example of <code style="background-image: linear-gradient(135deg, #723362, #9d223c); color: #fff; background-color: #9d223c; border-radius: .1875rem; margin: 0 .05rem 0 .13rem; font-family: inherit">white on purple</code>, we went with a <code>font-weight: 300</code>.</p>

                <p>Using all uppercased letters can be a powerful effect, but you’ll want to use it sparingly. One thing that can happen with uppercased words is <span style="text-transform: uppercase">the letters can feel jammed together</span>. This is because the default kerning and letter-spacing is meant for mostly-lowercased words. To compensate, and also to add a little more gravitas, we added a generous <code>letter-spacing: .4em</code>.</p>

                <p>As can be seen in the <a href="../../potions/letter-spacing/">letter spacing potion</a>, <code>letter-spacing</code> and <code>text-align</code> don’t play so nicely together because the spacing is added to the right of each letter. To compensate for this, when using these two properties together, we add a <code>padding-left</code> to match the chosen letter-spacing (in this case <code>.4em</code>).</p>

                <div class="example-wrapper typography-example-wrapper">
                    <style>
                        .typography-example-1 {
                            background-image: linear-gradient(135deg, #723362, #9d223c);
                            background-color: #9d223c;
                            color: #fff;
                            padding: 1em 0;
                            font-weight: 300;
                            font-size: 1.8em;
                            text-transform: uppercase;
                            text-align: center;
                            letter-spacing: .4em;
                            padding-left: .4em
                        }
                    </style>

                    <pre><code>.typography-example-1 {
    background-image: linear-gradient(135deg, #723362, #9d223c);
    background-color: #9d223c;
    color: #fff;
    padding: 1em 0;
    font-weight: 300;
    font-size: 1.8em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .4em;
    padding-left: .4em
}</code></pre>

                    <div class="example typography-example typography-example-1">
                        Example One
                    </div>
                </div>

                <h3>Example 2: Contrasting weights and styles</h3>

                <p>In this next example, we show how two lines of text interact with each other.</p>

                <p>The first line is given a similar treatment as Example 1, but with a heavier weight of <code>700</code>. To contrast this, the second line is given a thinner weight, <code>300</code>, an <code>italic</code> font style, and a lighter color, <code>#888</code><code class="color"><span style="background: #ccc"></span></code>.</p>

                <div class="example-wrapper typography-example-wrapper">
                    <style>
                        .typography-example-2 {
                            background: #fff;
                            color: #000;
                            border: .5em solid;
                            font-size: 1.5em;
                            padding: 1em 0;
                            text-align: center
                        }

                        .typography-example-2 .title {
                            font-weight: 700;
                            text-transform: uppercase;
                            letter-spacing: .4em;
                            padding-left: .4em
                        }

                        .typography-example-2 .author {
                            color: #888;
                            font-size: .7em;
                            font-weight: 300;
                            font-style: italic;
                            letter-spacing: .12em;
                            padding-left: .12em
                        }
                    </style>

                    <pre><code>.typography-example-2 {
    background: #fff;
    color: #000;
    border: .5em solid;
    font-size: 1.5em;
    padding: 1em 0;
    text-align: center
}

.typography-example-2 .title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4em;
    padding-left: .4em
}

.typography-example-2 .author {
    color: #888;
    font-size: .7em;
    font-weight: 300;
    font-style: italic;
    letter-spacing: .12em;
    padding-left: .12em
}</code></pre>

                    <div class="example typography-example typography-example-2">
                        <div class="title">Example</div>
                        <div class="author">by Adam Schwartz</div>
                    </div>
                </div>

                <style>
                    .a-little-fun span {
                        display: inline-block;
                        -webkit-animation: a-little-fun-wiggle 1s linear infinite alternate;
                    }

                    @-webkit-keyframes a-little-fun-wiggle {
                        from { -webkit-transform: rotateZ(-20deg) }
                        to   { -webkit-transform:  rotateZ(20deg) }
                    }
                </style>

                <h3>Example 3: Individual letter treatment</h3>

                <p>Sometimes you want to <span class="a-little-fun"><span>h</span><span>a</span><span>v</span><span>e</span><span>&nbsp;</span><span>a</span><span>&nbsp;</span><span>l</span><span>i</span><span>t</span><span>t</span><span>l</span><span>e</span><span>&nbsp;</span><span>f</span><span>u</span><span>n</span></span> with type. <a href="http://letteringjs.com">Lettering.js</a> is a great little tool for doing just that. But if you’re willing to <a href="https://www.youtube.com/watch?v=WXuBgSpLpK4">type out a bunch</a> of <code>span</code> wrappers for every letter yourself, you can do the same sort of thing without javascript!</p>

                <div class="example-wrapper typography-example-wrapper">
                    <style>
                        .typography-example-3 {
                            border: .2em solid #ff3283;
                            font-size: 3em;
                            text-align: center;
                            padding: .2em;
                            color: #fff
                        }

                        .typography-example-3 span {
                            display: inline-block;
                            width: 20%;
                            padding: .8125rem
                        }

                        .typography-example-3 span:nth-child(1) { background: #ff3283 }
                        .typography-example-3 span:nth-child(2) { background: #ff716a }
                        .typography-example-3 span:nth-child(3) { background: #8ebd14 }
                        .typography-example-3 span:nth-child(4) { background: #0085ae }
                        .typography-example-3 span:nth-child(5) { background: #6335e6 }
                    </style>

                    <pre><code>.typography-example-3 {
    border: .2em solid #ff4136;
    font-size: 3em;
    text-align: center;
    padding: .2em;
    color: #fff
}

.typography-example-3 span {
    display: inline-block;
    width: 20%;
    padding: .8125rem
}

.typography-example-3 span:nth-child(1) { background: #ff4136 }
.typography-example-3 span:nth-child(2) { background: #ff851b }
.typography-example-3 span:nth-child(3) { background: #2ecc40 }
.typography-example-3 span:nth-child(4) { background: #0074d9 }
.typography-example-3 span:nth-child(5) { background: #b10dc9 }</code></pre>

                    <div class="example typography-example typography-example-3">
                        <span>M</span><span>A</span><span>G</span><span>I</span><span>C</span>
                    </div>
                </div>

                <h3>Typography lives everywhere</h3>

                <p>Hopefully these few examples have given you an idea of what’s possible with the various typographical CSS properties. Typography is such a crucial part of design that a lot of typographical thinking and concepts are embedded in the other chapters. We’ll continue to explore typography as we go.</p>

                <style>
                    .typography-example-4 {
                        background: #fff;
                        border: .125em dashed #ccc;
                        color: #aaa;
                        padding: 1em 0;
                        text-align: center;
                        font-weight: 400;
                        font-size: 1.5em
                    }
                </style>

                <div class="example typography-example typography-example-4">
                    What will you design?
                </div>

                <h3>Butterick’s Practical Typography</h3>

                <p>For more fun with typography, check out the amazing resources below. In particular, glance over <a href="http://practicaltypography.com">Butterick’s Practical Typography</a><sup><a href="#cite-1">[1]</a></sup>. It’s a must-read for anyone with an interest in typography.</p>

                <h3>Further reading</h3>

                <ul>
                    <li><a href="http://practicaltypography.com">Butterick’s Practical Typography</a></li>
                    <li><a href="http://www.newnet-soft.com/blog/csstypography">CSS Typography Cheat Sheet</a></li>
                    <li><a href="http://type-scale.com">Type Scale</a></li>
                    <li><a href="http://tympanus.net/codrops/2012/09/26/make-a-statement-with-type/">Codedrops: Make a Statement with Type</a></li>
                </ul>

                <h3>Citations</h3>

                <ol>
                    <li><a id="cite-1" href="http://practicaltypography.com">Butterick’s Practical Typography</a></li>
                </ol>

                <hr>

                <nav class="chapter-navigation">
                    <a class="previous-chapter" href="../4-color">
                        <span class="number">4</span>
                        <span class="title">Color</span>
                    </a>
                    <a class="next-chapter" href="../6-transitions">
                        <span class="number">6</span>
                        <span class="title">Transitions</span>
                    </a>
                </nav>
            </div>
        </div>

        <script src="../../js/footer.js"></script>
    </body>
</html>
